<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script type="text/javascript" src="echarts.min.js"></script>
</head>

<body>
	<div id="main" style="height:300px; width400px;"></div>
	<div id="main2" style="height:300px; width400px;"></div>
	<div id="main3" style="height:300px; width400px;"></div>
	<div id="main4" style="height:300px; width400px;"></div>
	<script type="text/javascript">
	window.onDeviceOneLoaded = function() {
		var do_Page = deviceone.sm("do_Page");
	    var do_Notification = deviceone.sm("do_Notification");
	    var do_Global = deviceone.sm("do_Global");
	    var myChart = echarts.init(document.getElementById('main'));
	    var datas = do_Global.getMemory("echarts_datas");
	    var chart_option = function(){
	        var x_data = datas.x_data;
	        var y_data = datas.y_data;
	        var option = {
	            tooltip: {trigger: 'axis'},
	            legend: {
	            	left: 'left',
	                data: []
	            },
	            calculable: true,
	            xAxis: [
	                {
	                    type: 'category',
	                    boundaryGap: true,
	                    data: x_data,
	                    splitLine: {show: false}
	                }
	            ],
	            yAxis: [
	                {
	                    type: 'value',
	                    axisLabel: {formatter: '{value} '}
	                }
	            ],
	            series: []
	        };
	        option.legend.data = ["7日会员发展趋势"]
	        option.legend.data.forEach(function(v, k){
	        	var _color = 'red';
        		if (k == 1) _color = 'blue';
        		if (k == 2) _color = 'green';
        		option.series.push({
	                name: v,
	                type: 'line',
	                data: y_data[k].t,
	                itemStyle:{
	                    normal:{color:_color}
	                }
	            })
	        });
	        return option;
	    };
	    myChart.setOption(chart_option());
	    
	    
	    
	    //第二个
	    
	    var myChart2 = echarts.init(document.getElementById('main2'));
	    var datas = do_Global.getMemory("echarts_datas");
	    var chart_option2 = function(){
	        var x_data = datas.x_data2;
	        var y_data = datas.y_data2;
	        var option = {
	            tooltip: {trigger: 'axis'},
	            legend: {
	            	left: 'left',
	                data: []
	            },
	            calculable: true,
	            xAxis: [
	                {
	                    type: 'category',
	                    boundaryGap: true,
	                    data: x_data,
	                    splitLine: {show: false}
	                }
	            ],
	            yAxis: [
	                {
	                    type: 'value',
	                    axisLabel: {formatter: '{value} '}
	                }
	            ],
	            series: []
	        };
	        option.legend.data = ['7日储值趋势图']
	        option.legend.data.forEach(function(v, k){
	        	var _color = 'red';
        		if (k == 1) _color = 'blue';
        		if (k == 2) _color = 'green';
        		option.series.push({
	                name: v,
	                type: 'line',
	                data: y_data[k].t,
	                itemStyle:{
	                    normal:{color:_color}
	                }
	            })
	        });
	        return option;
	    };
	    myChart2.setOption(chart_option2());
	    
	    
	    
	    //第三个
	    var myChart3 = echarts.init(document.getElementById('main3'));
	    var datas = do_Global.getMemory("echarts_datas");
	    var chart_option3 = function(){
	        var x_data = datas.x_data3;
	        var y_data = datas.y_data3;
	        var option = {
	            tooltip: {trigger: 'axis'},
	            legend: {
	            	left: 'left',
	                data: []
	            },
	            calculable: true,
	            xAxis: [
	                {
	                    type: 'category',
	                    boundaryGap: true,
	                    data: x_data,
	                    splitLine: {show: false}
	                }
	            ],
	            yAxis: [
	                {
	                    type: 'value',
	                    axisLabel: {formatter: '{value}'}
	                }
	            ],
	            series: []
	        };
	        option.legend.data = ['7日消费趋势图']
	        option.legend.data.forEach(function(v, k){
	        	var _color = 'red';
        		if (k == 1) _color = 'blue';
        		if (k == 2) _color = 'green';
        		option.series.push({
	                name: v,
	                type: 'line',
	                data: y_data[k].t,
	                itemStyle:{
	                    normal:{color:_color}
	                }
	            })
	        });
	        return option;
	    };
	    myChart3.setOption(chart_option3());
	    
	    
	    var myChart4 = echarts.init(document.getElementById('main4'));
	    var datas = do_Global.getMemory("echarts_datas");
	    var chart_option4 = function(){
	        var x_data = datas.x_data4;
	        var y_data = datas.y_data4;
	        var option = {
        		title : {
        	        text: '7日单店交易TOP排行榜',
        	        x:'center'
        	    },
	        	color: ['#3398DB'],
	        	tooltip : {
			        trigger: 'axis',
			        axisPointer : {            
			            type : 'shadow'        
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    yAxis : [
			        {
			            type : 'category',
			            data : x_data,
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
	            xAxis: [
	                {
	                    type: 'value'
	                }
	            ],
	            series : [
                     {
                         name:'7日单店交易TOP排行榜',
                         type:'bar',
                         barWidth: '60%',
                         data:y_data
                     }
                 ]
	        };
	        return option;
	    };
	    myChart4.setOption(chart_option4());

	}
	
	
	</script>
</body>

</html>